<template>
  <Frame>
    <h1 slot="contitle" class="title">{{ grade }}级成员博客</h1>
    <div slot="text">
      <div class="block">
        <el-timeline>
          <el-timeline-item v-for="item in list1.directions" :timestamp="item" style="font-size: 17px" placement="top">
            <el-card>
              <div class="row">
                <div class="col-md-3 col-sm-3 col-xs-6" v-for="item2 in list1.bannerMembers" v-if="item2.memberDirection===item"><a :href="item2.memberBlog" target="_blank">{{item2.memberName}}</a>
                </div>
              </div>
            </el-card>
          </el-timeline-item>
        </el-timeline>
      </div>
    </div>
  </Frame>
</template>

<script>
const Frame = () => import('../Frame')

// import Frame from "../Frame";

export default {
  name: "Blog",
  data() {
    return {
      grader: '',
      list1: [],
    }
  },
  components: {
    Frame
  },
  computed: {
    grade() {
      this.grader = this.$route.params.grade
      console.log(this.grader)
      return this.$route.params.grade

    }
  },
  created() {
    this.$nextTick(function () {
      this.$axios({
        url: '/officialwebsite/memberFrontDesk/selectGrade',
        method: 'get',
        params: {
          grade: this.grader
        }

      }).then(res => {
        this.list1=res.obj
      })
    })
  }

}

</script>

<style lang="less" scoped>
@media screen and (max-width: 850px) {
  .row {
    font-size: 14px;
  }
}
</style>
